<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 通用工具栏 -->
      <PageTools>
        <template #slot-left>
          <span />
        </template>
        <template #slot-right>
          <el-button
            type="primary"
            size="small"
            @click="addPermissionDialogFn(1, '0')"
          >添加权限</el-button>
        </template>
      </PageTools>

      <!-- 表格 -->
      <el-card style="margin-top: 10px;">
        <el-table
          :data="permissionTreeList"
          border
          row-key="id"
        >
          <el-table-column
            label="名称"
            prop="name"
          />
          <el-table-column
            label="标识"
            prop="code"
          />
          <el-table-column
            label="描述"
            prop="description"
          />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button
                v-if="row.type === 1"
                type="text"
                @click="addPermissionDialogFn(2, row.id)"
              >添加</el-button>
              <el-button
                type="text"
                @click="editPermissionDialogFn(row.id)"
              >编辑</el-button>
              <el-button
                type="text"
                @click="deletePermissionFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加弹窗 -->
      <permission-dialog
        ref="permissionDialog"
        @addPermissionEv="addPermissionFn"
        @editPermissionEv="editPermissionFn"
      />
    </div>
  </div>
</template>

<script>
import {
  addPermissionAPI,
  delPermissionAPI,
  getPermissionDetailAPI,
  getPermissionListAPI,
  updatePermissionAPI
} from '@/api'
import { transTree } from '@/utils'
import permissionDialog from './components/permissionDialog.vue'
export default {
  name: 'Permission',
  components: { permissionDialog },
  data() {
    return {
      permissionTreeList: [], // 权限点列表（树形)
      permissionList: [] // 权限点列表
    }
  },
  created() {
    this.getPermissionListFn()
  },
  methods: {
    // 获取权限点列表 -> 发起请求
    async getPermissionListFn() {
      this.permissionList = (await getPermissionListAPI()).data
      this.permissionTreeList = transTree(this.permissionList, '0')
      this.$nextTick(() => {
        this.$refs.permissionDialog.permissionList = this.permissionList
      })
    },

    // 点击添加按钮 -> 弹窗出现
    /**
     * * type：右上角按钮传下来 1，页面权限右侧添加传下来 2
     * * pid：右上角按钮传下来 '0'，页面权限右侧添加传下来行对象的 id
     */
    addPermissionDialogFn(type, pid) {
      this.$refs.permissionDialog.showDialog = true
      this.$refs.permissionDialog.formData.type = type
      this.$refs.permissionDialog.formData.pid = pid
      this.$refs.permissionDialog.edit = false
    },

    // 弹窗中点击确定按钮 -> 发送请求
    async addPermissionFn(formData) {
      await addPermissionAPI(formData)
      this.getPermissionListFn()
    },

    // 点击编辑按钮 -> 弹窗出现
    async editPermissionDialogFn(id) {
      this.$refs.permissionDialog.edit = true
      this.$refs.permissionDialog.formData = (
        await getPermissionDetailAPI(id)
      ).data
      this.$refs.permissionDialog.showDialog = true
    },

    // 弹窗中点击确定按钮 -> 发送请求
    async editPermissionFn(id, formData) {
      await updatePermissionAPI(formData)
      this.getPermissionListFn()
    },

    // 点击删除按钮 -> 发送请求
    async deletePermissionFn(id) {
      await delPermissionAPI(id)
      this.$message.success('删除成功')
      this.getPermissionListFn()
    }
  }
}
</script>

<style lang="scss" scoped></style>
